<template>
	<div class="body">
		<div style="height: 66px"></div>
		<div class="container article-body">
			<div class="article-title"><span>{{article.value.title}}</span></div>
			<div ref="articleEl" class="html" v-html="htmlContent"></div>
		</div>
	</div>
</template>
<script setup>
import {ref, onMounted, onActivated, nextTick, reactive} from "vue";
import {useRoute} from "vue-router";
import {useStore} from "vuex";
import Methods from "../utils/Methods";
const store = useStore()
store.commit("setHeaderTab",-1)
import request from "../utils/request";
import {ElMessage} from "element-plus"
import Prism from 'prismjs';
// import "prismjs/themes/prism.css"

const htmlContent = ref('')
const articleEl = ref(null)
const article = reactive({value:{}})
const route = useRoute()

const getData = (article_id) => {
	request.post('/blog/home/articleDetail',Methods.obj2Form({article_id:article_id})).then(res => {
		// console.log(res.data)
		article.value = res.data
		htmlContent.value = Methods.editorHandleFill(res.data.content)
		document.title = res.data.title
		nextTick(() => {
			// Prism.highlightElement()
			Prism.highlightAll()
		})
	}).catch(err => {
		console.log(err)
	})
}


let article_id = route.query.article_id
if(!article_id) {
	ElMessage.error("操作异常")
}else {
	getData(article_id)
}

</script>
<style scoped lang="scss">
//::v-deep(.language-go) {
//	font-size: 25px;
//	color: red;
//}
.container {
  max-width: 1000px;
}
.article-body {
	background-color: rgba(255,255,255,0.9);
	box-shadow: 0 15px 15px 0 rgb(255 255 255 / 35%);
	box-sizing: border-box;
	padding: 15px;
}
.article-title {
	span {
		font-size: 20px;
		font-weight: bold;
	}
	margin-bottom: 15px;
}

::v-deep(.html) {
	/* table 样式 */
	table {
		border-top: 2px solid #888;
		border-left: 2px solid #888;
	}
	table td,
	table th {
		border-bottom: 2px solid #888;
		border-right: 2px solid #888;
		padding: 3px 5px;
	}
	table th {
		border-bottom: 2px solid #888;
		text-align: center;
	}
	/* ul ol 样式 */
	ul, ol {
		margin: 10px 0 10px 20px;
		li {
			margin-bottom: 10px;
		}
	}
}




</style>
